﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.0.min.js"></script>
    <meta name="keywords" content="jQuery, Slider, RangeSlider, jQuery Slider, Slider Widget, jqxSlider" />
    <meta name="description" content="This page represents the help documentation of the jqxSlider widget." />
    <title>jqxSlider API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='property-name-disabled'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    300
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the slider's width.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>width</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ width:"300px" });</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    35
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the slider's height.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>height</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ height:"15px" });</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets whether the slider is disabled.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>disabled</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ disabled:true }); </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span51'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        Gets or sets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
                       <h4>
                            Code example</h4>
                        <p>
                            Set the "rtl" property.
                        </p>
                        <pre><code>$('#widget').jqxSlider({rtl : true}); </code></pre>
                        <p>
                            Get the "rtl" property.
                        </p>
                        <pre><code>var rtl = $('#widget').jqxSlider('rtl'); </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.</p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
                        In order to set a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt;
</code></pre>
</code></pre>
                            </li>
                            <li>
                                Set the widget's theme property to 'energyblue' when you initialize it.
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>max</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    10
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets slider's maximum value. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>max</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ max: 100 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>min</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                          Sets or gets slider's minimum value. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>min</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ min: 500 }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>step</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   1
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Sets or gets the slider's step when the user is using the keyboard arrows, slider increment and decrement buttons or the mouse wheel for changing the slider's value. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>step</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ step: 2 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>showTicks</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Sets or gets whether ticks will be shown. </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>showTicks</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ showTicks: false }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>ticksPosition</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   both
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets slider's ticks position. Possible values - 'top', 'bottom', 'both'.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>ticksPosition</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ ticksPosition: 'top' }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>ticksFrequency</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                   2
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets slider's ticks frequency.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>ticksFrequency</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ ticksFrequency: 1 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>showButtons</span>
                </td>
                <td>
                    <span>Bool</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                            Sets or gets whether the scroll buttons will be shown.</p>
                            <h4>
                                Code examples</h4>
                            <p>
                                Initialize a jqxSlider with the <code>showButtons</code> property specified.
                            </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ showButtons: false });
                        </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>buttonsPosition</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   both
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets scroll buttons position. Possible values 'both', 'left', 'right'.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>buttonsPosition</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ buttonsPosition: 'left' }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>mode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   default
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets slider's mode. In the 'default' mode, the slider's thumb can be dragged smoothly ( like a scrollbar ). In 'fixed' mode, the thumb is dragged with a 'step' specified by the 'step' property.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>mode</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ mode: 'fixed' }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>layout</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                   "normal"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         Sets or gets the slider's layout. Possible values: "normal" and "reverse". When the layout is set to "reverse", the slider is filled from right-to-left(horizontal slider) and from top-to-bottom(vertical slider)</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>layout</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ layout: "reverse" }); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span33'>showRange</span>
                </td>
                <td>
                    <span>Bool</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets whether the slider range background is displayed. This is the fill between the slider's left button and the slider's thumb to indicate the selected value.
                        In range slider mode, the space between the handles is filled to indicate the selected values.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>showRange</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ showRange: false }); </code></pre>
                    </div>
                </td>
            </tr>

             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span34'>rangeSlider</span>
                </td>
                <td>
                    <span>Bool</span>
                </td>
                <td>
                   false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets whether the slider is displayed as a range slider and has 2 thumbs. This allows the user to select a range of values. By default, end-users can select only a single value.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>rangeSlider</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ rangeSlider: true }); </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span35'>tooltip</span>
                </td>
                <td>
                    <span>Bool</span>
                </td>
                <td>
                   true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets whether the slider title will be shown.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>tooltip</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ tooltip: false }); </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span36'>value</span>
                </td>
                <td>
                    <span>Number/Object</span>
                </td>
                <td>
                   0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets slider's value. This poperty will be an object with the following structure { rangeStart: range_start, rangeEnd: range_end } if the
                        slider is range slider otherwise it's going to be a number.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>value</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ value: 5 }); </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span38'>values</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                   [0, 10]
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets or gets range slider's values.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Initialize a jqxSlider with the <code>values</code> property specified.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider({ values: [2, 3] }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>change</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Change is triggered when the value of the slider is changed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the change event by type: jqxSlider.
                        </p>
                        <pre><code>
$('#jqxSlider').on('change', function (event) {
    var value = event.args.value;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>slide</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user is dragging the sliders thumb.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the slide event by type: jqxSlider.
                        </p>
                        <pre><code>$('#jqxSlider').on('slide', function (event) {  var value = event.args.value; }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>slideStart</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           SlideStart is triggered when the user start dragging slider's thumb.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the slideStart event by type: jqxSlider.
                        </p>
                        <pre><code>$('#jqxSlider').on('slideStart', function (event) { var value = event.args.value; }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>slideEnd</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         slideEnd event is triggered when the user have dragged the slider's thumb and drop it.  
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the slideEnd event by type: jqxSlider.
                        </p>
                        <pre><code>$('#jqxSlider').on('slideEnd', function (event) { var value = event.args.value; }); </code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>created</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                         This event is triggered when the jqxSlider is created.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the created event by type: jqxSlider.
                        </p>
                        <pre><code>$('#jqxSlider').on('created', function (event) { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
 
             <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>incrementValue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Increases the jqxSlider's value with the value of the 'step' property.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the incrementValue method.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider('incrementValue');</code></pre>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>decrementValue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p> Decreases the jqxSlider's value with the value of the 'step' property.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the decrementValue method.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider('decrementValue');</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>setValue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Sets the jqxSlider's value. When the slider is not in range slider mode, the required parameter for the value is a number which should be in the 'min' - 'max' range.
                        Possible value types in range slider mode- array, object or two numbers.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the setValue method.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider('setValue', 3);</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>getValue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets the slider's value. The returned value is a Number or an Object. If the Slider is a range slider, the method returns an Object with the following fields: rangeStart - the range's start value and rangeEnd - the range's end value..</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getValue method.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider('getValue');</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>disable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p> Disabling the slider.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the disable method.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider('disable');</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>enable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Enables the slider.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the enable method.
                        </p>
                        <pre><code>$('#jqxSlider').jqxSlider('enable', element);</code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>focus</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Focuses the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the "focus" method.
                        </p>
                        <pre><code>$('#widget').jqxSlider('focus'); </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span68'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Destroys the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the "destroy" method.
                        </p>
                        <pre><code>$('#widget').jqxSlider('destroy'); </code></pre>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>